<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <QfPage title="公司管理">
    <template #hd>
      <el-row>
        <el-col :span="5">
          <el-button @click="centerDialogVisible=true">新增</el-button>
        </el-col>
        <el-col :span="4" :offset="1"> 是否只看vue <el-switch v-model="isVue" /> </el-col>
        <el-col :span="4" :offset="1"> 是否只看React <el-switch v-model="isReact" /> </el-col>
      </el-row>
    </template>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="公司id" width="180" />
    <el-table-column prop="name" label="公司名称" width="180" />
    <el-table-column prop="areaid" label="公司所在区域">
      <template #default="{ row }">
          {{ formatArea(row.areaid) }}
        </template>
    </el-table-column>
    <el-table-column prop="isVue" label="是否使用vue">
      <template #default="scope">
       {{ scope.row.isVue ? '是':'否' }}
      </template>
    </el-table-column>
    <el-table-column prop="isReact" label="是否使用React">
      <template #default="scope">
       {{ scope.row.isReact ? '是':'否' }}
      </template>
    </el-table-column>
    <el-table-column>
      <template #default="{ row }">
        <el-button type="danger" plain @click="handleDelete(row.id)">删除</el-button>
        <el-button type="primary" plain @click="handleEditOpen(row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

    <template #ft>
      <el-pagination
        small
        background
        layout="prev, pager, next,sizes"
        :total="total"
        class="mt-4"
        :page-sizes="[5,10,30,50]"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </template>
  <el-dialog v-model="centerDialogVisible" title="添加公司信息" width="60%" center>
  <el-form :model="companyInfo" ref="addForm" label-width="110px">
    <el-form-item label="公司名称">
      <el-input v-model="companyInfo.name"/>
    </el-form-item>
    <el-form-item label="公司所在区域">
      <el-cascader v-model="companyInfo.areaid" :options="regionDataPlus" />
    </el-form-item>
    <el-form-item label="是否使用vue">
      <el-switch v-model="companyInfo.isVue"/>
    </el-form-item>
    <el-form-item label="是否使用React">
      <el-switch v-model="companyInfo.isReact"/>
    </el-form-item>
    <el-form-item label="其它要求技能">
      <el-input type="textarea" rows="10" :autosize="{minRows:4,maxRows:4}"
      v-model="companyInfo.skill"/>
    </el-form-item>
    <el-form-item label="公司描述">
      <el-input type="textarea" rows="10" :autosize="{minRows:4,maxRows:4}"
      v-model="companyInfo.desc"/>
    </el-form-item>
  </el-form>
  <template #footer>
    <el-button @click="confirm">添加</el-button>
  </template>
  </el-dialog>
  <el-drawer
    v-model="showEdit"
    title="编辑公司信息"
  >
  <el-form :model="companyInfo" ref="addForm" label-width="110px">
    <el-form-item label="公司名称">
      <el-input v-model="companyInfo.name"/>
    </el-form-item>
    <el-form-item label="公司所在区域">
      <el-cascader v-model="companyInfo.areaid" :options="regionDataPlus" />
    </el-form-item>
    <el-form-item label="是否使用vue">
      <el-switch v-model="companyInfo.isVue"/>
    </el-form-item>
    <el-form-item label="是否使用React">
      <el-switch v-model="companyInfo.isReact"/>
    </el-form-item>
    <el-form-item label="其它要求技能">
      <el-input type="textarea" rows="10" :autosize="{minRows:4,maxRows:4}"
      v-model="companyInfo.skill"/>
    </el-form-item>
    <el-form-item label="公司描述">
      <el-input type="textarea" rows="10" :autosize="{minRows:4,maxRows:4}"
      v-model="companyInfo.desc"/>
    </el-form-item>
  </el-form>
  <el-button @click="confirmEdit">确认修改</el-button>
  </el-drawer>
  </QfPage>
</template>
<script>
import { regionDataPlus } from 'element-china-area-data';
import { ElMessageBox, ElNotification } from 'element-plus';
import {
  addConpany, getConpany, delConpany, editConpany,
} from '@/api/conpany';
// eslint-disable-next-line
import { showMsg } from '@/uitl/toast';

export default {
  // eslint-disable-next-line
  name: 'conpanypage',
  data() {
    return {
      showEdit: false,
      total: 0,
      limit: 5,
      curPage: 1,
      isReact: false,
      isVue: false,
      regionDataPlus,
      companyInfo: {
        name: '',
        isVue: false,
        isReact: false,
        skill: '',
        desc: '',
        areaid: '',
      },
      centerDialogVisible: false,
      tableData: [],
      curConpanyId: '',
    };
  },
  watch: {
    isVue() {
      this.getlist();
    },
    isReact() {
      this.getlist();
    },
  },
  created() {
    this.getlist();
    // this.formatArea('120000,120100,120101');
  },
  methods: {
    handleEditOpen(row) {
      console.log('要编辑的那一行的信息', row);
      const {
        id, isReact, isVue, areaid, ...info
      } = row;
      this.curConpanyId = id;

      this.companyInfo = {
        ...info,
        // eslint-disable-next-line
        isReact: isReact === 1 ? true : false,
        // eslint-disable-next-line
        isVue: isVue === 1 ? true : false,
        areaid: areaid.split(','),
      };
      this.showEdit = true;
    },
    handleDelete(id) {
      console.log('要删除的id', id);
      ElMessageBox.confirm('该操作无法撤回请问是否继续删除?', '请确认', {
        confirmButtonText: '没错！',
        cancelButtonText: '算了',
        type: 'warning',
      })
        // eslint-disable-next-line consistent-return
        .then(async () => {
          console.log('确认');
          const res = await delConpany(id);
          console.log('删除的结果', res);
          const { statusText } = res;
          if (statusText === 'OK') {
            ElNotification({
              title: '成功',
              message: '该信息删除成功',
              type: 'success',
            });
            return this.getlist();
          }
          showMsg('删除失败');
        }).catch(() => {
          console.log('取消');
        });
    },
    handlePageChange(res) {
      console.log('页面发生了变化', res);
      this.curPage = res;
      this.getlist();
    },
    handleSizeChange(res) {
      console.log('每页条数发生变化', res);
      this.limit = res;
      this.getlist();
    },
    formatArea(str) {
      const arr = str.split(',');
      // 省一级
      const province = regionDataPlus.find((item) => item.value === arr[0]);
      // 市一级
      const city = province.children.find((item) => item.value === arr[1]);
      // 区一级
      const zone = city.children.find((item) => item.value === arr[2]);
      return `${province.label}/${city.label}/${zone.label}`;
    },
    // eslint-disable-next-line
    async getlist() {
      const res = await getConpany({
        $limit: this.limit,
        // eslint-disable-next-line
        $skip: (this.curPage - 1) * this.limit,
        isReact: this.isReact,
        isVue: this.isVue,
      });
      console.log('公司列表', res);
      const { statusText, data } = res;
      if (statusText !== 'OK') return showMsg('获取列表失败');
      this.tableData = data.data;// 給表格数据赋值
      this.total = data.total;
    },
    // eslint-disable-next-line
    async confirm() {
      console.log('公司的信息', this.companyInfo);
      const ress = await addConpany({
        ...this.companyInfo,
        isReact: this.companyInfo.isReact ? 1 : 0,
        isVue: this.companyInfo.isVue ? 1 : 0,
        areaid: this.companyInfo.areaid.join(),
      });

      const { status } = ress;
      console.log('status', status);
      if (status !== 201) return showMsg('添加失败');
      this.getlist();
      this.companyInfo = {
        name: '',
        isVue: false,
        isReact: false,
        skill: '',
        desc: '',
        areaid: '',
      };
      this.centerDialogVisible = false;
      console.log(ress);
    },
    // eslint-disable-next-line
    async confirmEdit() {
      const ress = await editConpany(
        {
          ...this.companyInfo,
          isReact: this.companyInfo.isReact ? 1 : 0,
          isVue: this.companyInfo.isVue ? 1 : 0,
          areaid: this.companyInfo.areaid.join(),
        },
        this.curConpanyId,
      );

      const { status } = ress;
      console.log('status', status);
      if (status !== 200) return showMsg('修改失败');
      this.getlist();
      this.companyInfo = {
        name: '',
        isVue: false,
        isReact: false,
        skill: '',
        desc: '',
        areaid: '',
      };
      this.showEdit = false;
      console.log(ress);
    },
  },
  beforeRouteEnter(to, from, next) {
    console.log('有人打算进入公司管理');
    next();
  },
  beforeRouteLeave(to, from, next) {
    next();
  },
};
</script>
<style lang="scss" scoped>

</style>
